import * as React from 'react';
import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button, Steps } from 'antd';
import MyBread from '../../component/common/MyBread';
import StackView, { IStackViewItem, IStackViewPros, renderViewByHash } from '../../component/common/StackView';

import LoadingComponent from '../../component/common/LoadingComponent';

import { RootHash, StackViewPages } from './Customer';

import CustomerDetailStep1 from './detail-step/CustomerDetailsStep1';
import CustomerDetailStep2 from './detail-step/CustomerDetailsStep2';
import CustomerDetailStep3 from './detail-step/CustomerDetailsStep3';
import CustomerDetailStep4 from './detail-step/CustomerDetailsStep4';
import CustomerDetailStep5 from './detail-step/CustomerDetailsStep5';

import CustomerStore, { Customer } from './CustomerStore';
import * as moment from 'moment';

const STEP_DATA = [
  { id: 0, name: '基本信息1' },
  { id: 1, name: '基本信息2' },
  { id: 2, name: '基本信息3' },
  { id: 3, name: '基本信息4' },
  { id: 4, name: '基本信息5' },
];

interface IProps extends IStackViewPros {
  data?: any;
  callback?: any;
}

export default class CustomerInfo extends LoadingComponent<IProps, any>{

  constructor(props: any) {
    super(props)

    this.state = Object.assign({
      current: 0,
      maxStep: 0,
    }, this.state);
  }

  // 组件将要加载
  componentWillMount() {
    window.setTimeout(() => {
      var state = {};
      let customer: Customer = CustomerStore.get(this.props.data.id);
      if (customer) {
        let {fields} = customer.form2;
        if (fields.birthday) {
          fields.birthday = moment(fields.birthday, 'YYYY-MM-DD');
        }
        state = {
          customer: customer
        };
      }
      this.fetchLoad(state);
    }, 100);
  }

  goBack = () => {
    this.props.stackView.popView();
  }

  nextStep = () => {
    this.toNextStep();
  }

  prevStep = () => {
    const current = this.state.current - 1;
    this.setState({ current });
  }

  toNextStep = () => {
    let {current, maxStep} = this.state;
    current++;
    maxStep = Math.max(current, maxStep);
    this.setState({ current, maxStep });
  }

  doEdit = () => {
    let {customer} = this.state;
    customer.current = 0;
    this.props.stackView.replaceView(renderViewByHash(StackViewPages, RootHash + '/edit/' + customer.id, this.props.callback));
  }

  renderStepBtn = (current: number, ) => {
    const stepSize = STEP_DATA.length;
    if (current == 0) {
      return (
        <div className='break-no'>
          <Button type='ghost' onClick={this.goBack}><Icon type='rollback'></Icon>返回</Button>
          <Button type='ghost' onClick={this.nextStep}>下一步<Icon type='right'></Icon></Button>
          <Button type='primary' onClick={this.doEdit}><Icon type='edit'></Icon>编辑</Button>
        </div>
      );
    } else if (current > 0 && current < stepSize - 1) {
      return (
        <div className='break-no'>
          <Button type='ghost' onClick={this.goBack}><Icon type='rollback'></Icon>返回</Button>
          <Button type='ghost' onClick={this.prevStep}><Icon type='left'></Icon>上一步</Button>
          <Button type='ghost' onClick={this.nextStep}>下一步<Icon type='right'></Icon></Button>
          <Button type='primary' onClick={this.doEdit}><Icon type='edit'></Icon>编辑</Button>
        </div>
      );
    } else if (current == stepSize - 1) {
      return (
        <div className='break-no'>
          <Button type='ghost' onClick={this.goBack}><Icon type='rollback'></Icon>返回</Button>
          <Button type='ghost' onClick={this.prevStep}><Icon type='left'></Icon>上一步</Button>
          <Button type='primary' onClick={this.doEdit}><Icon type='edit'></Icon>编辑</Button>
        </div>
      )
    }
  }


  renderStepContent = (current: number, maxStep: number) => {
    let {customer} = this.state;
    customer.form0.fields.id = customer.id;
    return (
      <div className='flex-grow-1 overflow-scroll relative'>
        {
          maxStep >= 0 ? <CustomerDetailStep1 ref='form0' show={current === 0} {...customer.form0.fields} onSubmit={this.nextStep} /> : ''
        }
        {
          maxStep >= 1 ? <CustomerDetailStep2 ref='form1' show={current === 1} {...customer.form1.fields} onSubmit={this.nextStep} /> : ''
        }
        {
          maxStep >= 2 ? <CustomerDetailStep3 ref='form2' show={current === 2} {...customer.form2.fields} onSubmit={this.nextStep} /> : ''
        }
        {
          maxStep >= 3 ? <CustomerDetailStep4 ref='form3' show={current === 3} {...customer.form3.fields} onSubmit={this.nextStep} /> : ''
        }
        {
          maxStep >= 4 ? <CustomerDetailStep5 ref='form4' show={current === 4} {...customer.form4.fields} onSubmit={this.nextStep} /> : ''
        }
      </div>
    )
  }

  renderUI() {
    const { current, maxStep } = this.state;
    return (
      <div className='view-inner flex-row'>
        <div className='view__banner flex-col'>
          <div className='flex-grow-1'>
            <MyBread stackView={this.props.stackView} />
          </div>
          <div className='break-no'>
            {this.renderStepBtn(current)}
          </div>
        </div>
        <div className='view__content flex-row flex-grow-1 overflow-hidden'>
          <div className='view-step-bar'>
            <Steps current={current}>
              {STEP_DATA.map(item => <Steps.Step key={item.name} title={item.name} />)}
            </Steps>
          </div>
          {this.renderStepContent(current, maxStep)}
        </div>
      </div>
    );
  }
}
